<!--
 * @Author: 张旭东 zxd12345688@qq.com
 * @Date: 2025-09-11 08:41:23
 * @LastEditors: 张旭东 zxd12345688@qq.com
 * @LastEditTime: 2025-09-17 15:08:04
 * @FilePath: \前端\city\src\pages\components\Bottom1.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--
 * @Author: 张旭东 zxd12345688@qq.com
 * @Date: 2025-09-11 08:41:23
 * @LastEditors: 张旭东 zxd12345688@qq.com
 * @LastEditTime: 2025-09-17 15:07:01
 * @FilePath: \前端\city\src\pages\components\Bottom1.vue
 * @Description: 服务事项概览雷达图组件（修复无限放大问题）
-->
<template>
    <div class="bottom1-container">
        <Title :title="title"></Title>
        <!-- 图表容器：添加固定高度和溢出隐藏，防止放大溢出 -->
        <div ref="radarContainer" class="radar-container"></div>
    </div>
</template>

<script>
import Title from './Title.vue';
import { Radar } from '@antv/g2plot';

export default {
    components: { Title },
    data() {
        return {
            title: '服务事项概览',
            radarPlot: null,
            serviceData: [
                { name: '咨询服务', completion: 85 },
                { name: '投诉处理', completion: 72 },
                { name: '业务办理', completion: 90 },
                { name: '信息查询', completion: 95 },
                { name: '意见反馈', completion: 68 },
                { name: '其他服务', completion: 78 }
            ],
            resizeTimeout: null // 用于resize节流的定时器
        };
    },
    methods: {
        initRadarChart() {
            // 1. 双重校验容器：确保DOM存在且未被销毁
            const container = this.$refs.radarContainer;
            if (!container) {
                console.error('雷达图容器不存在！');
                return;
            }

            // 2. 强制销毁旧实例：避免重复创建导致的布局错乱
            if (this.radarPlot) {
                this.radarPlot.destroy();
                this.radarPlot = null;
            }

            // 3. 固定图表数据范围：防止数据异常导致尺寸变化
            const chartData = this.serviceData.map(item => ({
                name: item.name,
                value: Math.min(item.completion, 100) // 强制完成率不超过100%
            }));

            try {
                this.radarPlot = new Radar(container, {
                    data: chartData,
                    xField: 'name',
                    yField: 'value',
                    // 4. 固定y轴范围：避免数据波动导致图表缩放
                    meta: {
                        value: {
                            min: 0,
                            max: 100,
                            nice: false, // 关闭自动优化，锁定0-100范围
                            alias: '完成率(%)'
                        }
                    },
                    point: { size: 6, shape: 'circle', style: { fill: '#fff', stroke: '#165DFF', lineWidth: 2 } },
                    line: { style: { stroke: '#165DFF', lineWidth: 2 } },
                    area: { style: { fill: 'l(0) 0:#165DFF 1:rgba(22, 93, 255, 0.1)' } },
                    // 5. 固定极坐标大小：防止雷达图自动放大
                    polar: {
                        radius: 0.6, // 缩小雷达图占容器的比例，避免溢出
                        center: ['50%', '50%'] // 强制居中，防止向下偏移
                    },
                    angleAxis: {
                        label: { style: { fill: '#fff', fontSize: 12 } },
                        line: { style: { stroke: '#4E5969' } }
                    },
                    radiusAxis: {
                        grid: { style: { stroke: '#4E5969' } },
                        label: { style: { fill: '#fff', fontSize: 10 }, formatter: (v) => `${v}%` }
                    },
                    tooltip: {
                        formatter: (d) => ({ name: d.name, value: `${d.value}%` }),
                        domStyles: { 'g2-tooltip': { background: '#1D2129', color: '#fff', border: 'none' } }
                    },
                    legend: false,
                    // 6. 禁用图表自动调整尺寸：防止异常放大
                    autoFit: false
                });

                // 7. 手动设置图表尺寸：与容器尺寸完全一致
                const { clientWidth, clientHeight } = container;
                this.radarPlot.changeSize(clientWidth, clientHeight);
                this.radarPlot.render();
            } catch (err) {
                console.error('图表初始化失败：', err);
            }
        },

        // 8. resize节流处理：500ms内只执行一次，避免频繁调整
        handleResize() {
            clearTimeout(this.resizeTimeout);
            this.resizeTimeout = setTimeout(() => {
                if (this.radarPlot && this.$refs.radarContainer) {
                    const { clientWidth, clientHeight } = this.$refs.radarContainer;
                    // 只在尺寸有效时调整（避免0尺寸导致的异常）
                    if (clientWidth > 0 && clientHeight > 0) {
                        this.radarPlot.changeSize(clientWidth, clientHeight);
                    }
                }
            }, 500);
        }
    },
    mounted() {
        // 9. 确保DOM完全加载后初始化（只执行一次）
        this.$nextTick(() => {
            this.initRadarChart();
        });

        // 10. 监听窗口resize（添加节流）
        window.addEventListener('resize', this.handleResize);
    },
    beforeDestroy() {
        // 11. 彻底清理资源：防止内存泄漏和残留渲染
        clearTimeout(this.resizeTimeout);
        window.removeEventListener('resize', this.handleResize);
        if (this.radarPlot) {
            this.radarPlot.destroy();
            this.radarPlot = null;
        }
    }
};
</script>

<style lang="less" scoped>
/* 12. 父容器：固定高度+溢出隐藏，彻底防止向下放大 */
.bottom1-container {
    width: 100%;
    height: 300px; /* 固定总高度，不依赖父组件动态高度 */
    box-sizing: border-box;
    padding: 10px;
    background: #0F172A;
    overflow: hidden; /* 即使内容溢出，也强制隐藏 */
}

/* 13. 图表容器：固定高度，与父容器高度匹配 */
.radar-container {
    width: 100%;
    height: 250px; /* 固定图表高度（总高度300px - Title高度~50px） */
    overflow: hidden; /* 防止图表内部元素溢出 */
}
</style>
